<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2023-09-14 15:06:18
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2023-10-16 13:37:39
 * @FilePath: \admin_vue\src\views\T12.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->

<template>
    <div class="t12_wrap">
        <el-input v-model="input" placeholder="输入爬取的地址" readonly></el-input>
        <el-button type="success" @click="getData()">爬取</el-button>
        <el-button type="success" @click="next()">下一50期</el-button>
        <div id="chartContainer" style="width: 100%; height: 400px"></div>
        <div id="chartContainer2" style="width: 100%; height: 400px"></div>
    </div>
</template>
<script>
import $ from 'jquery'
import * as echarts from 'echarts'

export default {
    name: 'T12',
    data() {
        return {
            input: 'https://www.fjcp.cn/cp.php?type=ssq&page=1',
            redBollArr: [],
            blueBollArr: [],
        }
    },
    components: {

    },
    computed: {

    },

    mounted() {

    },

    methods: {
        next() {
            let num = this.input.substring(this.input.length - 1)
            num++
            this.input = this.input.substring(0, this.input.length - 1) + num
            this.getData()
        },
        getData() {
            const num = this.input.substring(this.input.length - 1)
            this.axios.get(`/cp.php?type=ssq&page=${num}`, { baseURL: '/fjcp' })
            .then((resp) => {
            // 如果成功将在这里进行后续的逻辑操作
                if (resp.status == 200) {
                    const $html = $(resp.data)
                    const $rows = $html.find('table').find('tbody').find('tr')
                    const allData = []
                    $rows.each((row) => {
                        const $tds = $($rows[row]).find('td')
                        const rowData = []

                        // 遍历前三个 <td> 元素，获取文本内容
                        for (let i = 0; i < 3; i++) {
                            const text = $tds.eq(i).text().trim()
                            if (i == 2) {
                                const roll = text.split(' + ')
                                rowData.push(roll[0])
                                rowData.push(roll[1])
                            } else {
                                rowData.push(text)
                            }
                        }
                        allData.push(rowData)
                    })
                    // 统计最近50期 红球和篮球每个号码各出现的次数
                    // 红球号码范围：从01到33，共33个号码可供选择。
                    // 蓝球号码范围：从01到16，共16个号码可供选择。
                    const redRollObj = []
                    const buleRollObj = []
                    allData.forEach(item => {
                        let redBollList = item[2].split(' ')
                        let blueBoll = item[3]
                        redBollList.forEach(boll => {
                            if (redRollObj[boll - 1]) {
                                redRollObj[boll - 1]++
                            } else {
                                redRollObj[boll - 1] = 1
                            }
                        })
                        if (buleRollObj[blueBoll - 1]) {
                            buleRollObj[blueBoll - 1]++
                        } else {
                            buleRollObj[blueBoll - 1] = 1
                        }
                    })
                    this.redBollArr = redRollObj
                    console.log('%c Line:89 🍡 redRollObj', 'color:#7f2b82', redRollObj)
                    this.blueBollArr = buleRollObj
                    console.log('%c Line:90 🌭 buleRollObj', 'color:#33a5ff', buleRollObj)
                    this.redEcharts()
                    this.blueEcharts()
                }
            })
            .catch((err) => {
                // 如果请求失败将在这里进行后续的逻辑操作
                this.$message.error('网络错误')
            })
        },
        redEcharts() {
            // 获取 chartContainer 元素
            const chartContainer = document.getElementById('chartContainer')

            // 实例化 Echarts
            const myChart = echarts.init(chartContainer)

            // 定义柱状图的数据
            const data = this.redBollArr

            // 使用 Echarts 的配置项来定义柱状图的样式和数据
            const option = {
                // 设置柱状图的样式和数据
                color: 'red',
                title: {
                    text: '红色球近50期走势图', // 设置标题文本
                    textStyle: {
                        color: 'red', // 设置标题文本颜色
                        fontSize: 18, // 设置标题文本字体大小
                    },
                    left: 'center', // 设置标题水平居中
                },
                xAxis: {
                    type: 'category',
                    data: Array.from({ length: 33 }, (_, index) => index + 1),
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data,
                        type: 'bar',
                        label: {
                            show: true, // 显示数字标签
                            position: 'top', // 数字标签显示在柱子顶部
                        },
                    },
                ],
            }

            // 渲染柱状图
            myChart.setOption(option)
        },
        blueEcharts() {
            // 获取 chartContainer 元素
            const chartContainer = document.getElementById('chartContainer2')

            // 实例化 Echarts
            const myChart = echarts.init(chartContainer)

            // 定义柱状图的数据
            const data = this.blueBollArr

            // 使用 Echarts 的配置项来定义柱状图的样式和数据
            const option = {
                // 设置柱状图的样式和数据
                color: 'blue',
                title: {
                    text: '篮色球近50期走势图', // 设置标题文本
                    textStyle: {
                        color: 'blue', // 设置标题文本颜色
                        fontSize: 18, // 设置标题文本字体大小
                    },
                    left: 'center', // 设置标题水平居中
                },
                xAxis: {
                    type: 'category',
                    data: Array.from({ length: 16 }, (_, index) => index + 1),
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data,
                        type: 'bar',
                        label: {
                            show: true, // 显示数字标签
                            position: 'top', // 数字标签显示在柱子顶部
                        },
                    },
                ],
            }

            // 渲染柱状图
            myChart.setOption(option)
        },
    },
    destroyed() {

    },
}
</script>
<style scoped>
</style>